export default {
    data() {
        return {edges: [], focusNodeId: null, hoverNodeId: null}
    },
    computed: {
        steps() {
            let steps = _.groupBy(this.list, 'pivot.step');
            let lastStep = _.findLastKey(steps);
            let stepsArr = [];
            for (let i = 0; i <= lastStep; i++) {
                if (steps[i]) {
                    stepsArr[i] = steps[i];
                } else {
                    stepsArr[i] = [];
                }
            }

            return stepsArr;
        }
    }, methods: {
        refreshGraphic() {
            this.$nextTick(() => {
                    this.drawGraphic();
                }
            )
        }, _nodePosition() {
            let node_id;
            let step;
            let current_node_top_point_top, current_node_top_point_left, current_node_bottom_point_top,
                current_node_bottom_point_left;
            let arr = [];

            for (let node of this.$refs['editor-node']) {
                node_id = node.attributes['data-node'].value;
                step = node.attributes['data-step'].value;
                current_node_top_point_top = this.$refs['editor-step'][step].offsetTop + node.offsetTop + (node.offsetTop / 2);
                current_node_top_point_left = this.$refs['editor-step'][step].offsetLeft + node.offsetLeft + (node.offsetWidth / 2);
                current_node_bottom_point_top = current_node_top_point_top + node.offsetHeight;
                current_node_bottom_point_left = current_node_top_point_left;
                arr[node_id] = {
                    node_width: node.offsetWidth,
                    node_height: node.offsetHeight,
                    current_node_top_point_top: current_node_top_point_top,
                    current_node_top_point_left: current_node_top_point_left,
                    current_node_bottom_point_top: current_node_bottom_point_top,
                    current_node_bottom_point_left: current_node_bottom_point_left
                };
            }

            return arr;
        },
        drawGraphic() {
            let position = this._nodePosition();
            let next_node_key = this.nextNodeKey;
            let edges = [];
            for (let node of this.list) {
                if (node.pivot[next_node_key] !== null) {
                    _.map(node.pivot[next_node_key], (id) => {
                        if (id && position.hasOwnProperty(id)) {
                            edges.push({
                                node_id: node.id,
                                next_node_id: id,
                                node_width: position[node.id].node_width,
                                node_height: position[node.id].node_height,
                                node_right: 20,//TODO:此处为硬编码
                                node_bottom: 10 + 10 + 15 + 10,//TODO:此处为硬编码，需要配合样式修改
                                current_top: position[node.id].current_node_bottom_point_top,
                                current_left: position[node.id].current_node_bottom_point_left,
                                next_top: position[id].current_node_top_point_top,
                                next_left: position[id].current_node_top_point_left,
                            });
                        }

                    });
                }
            }
            this.edges = edges;
        }, find(id) {
            return this.list[this.findIndex(id)];
        }, findIndex(id) {
            return _.findIndex(this.list, (item) => {
                return item.id === id;
            });
        }, focusNode(id) {
            // if (this.focusNodeId === id) {
            //     this.focusNodeId = null;
            // } else {
            //     if (this.focusNodeId !== null) {
            //         let item = this.find(this.focusNodeId);
            //         let next_item = this.find(id);
            //         console.log(item.pivot[this.nextNodeKey], id, _.indexOf(item.pivot[this.nextNodeKey], id));
            //         let next_ids=[];
            //         if(item.pivot[this.nextNodeKey]){
            //             next_ids=item.pivot[this.nextNodeKey];
            //         }
            //         let noEdge = () => {//没有连接
            //
            //             return _.indexOf(next_ids, id);
            //         };
            //         let noReverseEdge = () => {//没有相反连接
            //             return _.indexOf(next_item.pivot[this.nextNodeKey], this.focusNodeId) === -1;
            //         };
            //         if (noEdge() && noReverseEdge()) {
            //             next_ids.push(id);
            //
            //             this.$confirm('将连接到此节点，是否确认？').then(() => {
            //                 console.log(next_ids);
            //                 this.linkToOtherNode(next_ids)
            //             })
            //         } else {
            //             if (!noReverseEdge()) {
            //                 this.$message.error('不允许相反的连接')
            //             }
            //             if (!noEdge()) {
            //                 this.$message.error('连接已存在')
            //             }
            //             this.focusNodeId = null;
            //         }
            //
            //     } else {
                    this.focusNodeId = id;
            //     }
            // }

        }
    }
}